<template>
  <div class="mention extract">
    <header-bar :text="title" :left="left"></header-bar>
  <div class="m_content">
    <div class="mc_select">
      <div>地址</div>
      <input type="text" placeholder="请输入地址" v-model="address">      
    </div>
    
    <div class="kmention extrmen" style="padding-bottom:10px;">
      <div>可提取{{money}}</div>
      <div class="mc_ye">
        <input type="text" placeholder="请输入提币数量" v-model="count">
      <button @click="allChange">全部提取</button>
      </div>
    </div>
  </div>
  <div class="extractrange">
      <div class="epoundage">
          <span>手续费</span>
          <b>{{sxmoney}}</b>
      </div>
      <!-- <div class="rangechange">
          <mt-range
            v-model="rangeValue"
            :min="0"
            :max="3"
            :step="1"
            :bar-height="15">
        </mt-range>
        <div class="rangeday">
            <div :class="{fontcont:rangeValue==0,colorcont:rangeValue>=0}">7天</div>
            <div :class="{fontcont:rangeValue==1,colorcont:rangeValue>=1}">3天</div>
            <div :class="{fontcont:rangeValue==2,colorcont:rangeValue>=2}">1天</div>
            <div :class="{fontcont:rangeValue==3,colorcont:rangeValue>=3}">1小时</div>
        </div>
      </div> -->
  </div>
  <button class="m_sub" @click="postmoney(count)">确认提币</button>
  <div class="m_f">
    <p>友情提示</p>
    <p>1、提币原路返回</p>
  </div>
  <div class="pay-bg" v-if="flag">
        <div class="pay-tool">
            <div class="pay-tool-title border-bottom">
            <span  @click="backHandle()" class="iconfont icon-zuo"></span><strong>请输入交易密码</strong>
            </div>
            <div class="pay-tool-content">
            <div class="pay-tool-inputs">
                <div class="item" v-for="(i,key) in items" :key="key"><span class="icon_dot" v-if="password[i]"></span></div>
            </div>
            </div>
            <div class="pay-tool-keyboard">
            <ul>
                <li @click="keyUpHandle($event)" v-for="(val,key) in keys" :key="key">
                {{ val }}
                </li>
                <li class="del" @click="delHandle"><span class="icon-del" style="font-size:14px">回退</span></li>
            </ul>
        </div>
     </div>
   </div>
   <Code :flag="flag1" @close="close" @changePwd='changePwd' @ok="successOk" ref="code"></Code>
   <mt-popup
        v-model="popupVisible">
        <div class="m_fade">
          <div class="mf_h">选择提币类型</div>
        <ul>
          <li>BTC</li>
          <li>EOS</li>
          <li>ETH</li>
        </ul>
        </div>
      </mt-popup>
  </div>
</template>
<script>
import headerBar from "./main/header";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0];
import { Header, Popup, MessageBox, Toast, Range } from "mint-ui";
import { userInfo, withdraw } from "../api/api.js";
import Code from "./main/code";
export default {
  name: "Extract",
  data() {
    return {
      msg: "",
      popupVisible: false,
      popup: "",
      money: 0,
      placeholder: "",
      count: "",
      id: "",
      phone: "",
      rangeValue: 0,
      status: "",
      userstatus: "",
      code: "",
      items: [0, 1, 2, 3, 4, 5],
      keys: keys(),
      password: [],
      flag: false,
      address: "",
      title: "提币",
      left: {
        status: true
      },
      sxmoney: "",
      flag1:false,
      pwd:""
    };
  },
  computed: {
    ...mapState(["pageInfo"])
  },
  components: {
    headerBar,
    Code
  },
  methods: {
    close() {
      this.flag1 = false;
    },
    changePwd(pwd) {
      this.pwd = pwd;
    },
    successOk() {
      this.getwithdraw()
    },
    back() {
      this.$router.go(-1);
    },
    backHandle() {
      this.flag = false;
    },
    keyUpHandle(e) {
      let text = e.currentTarget.innerText;
      let len = this.password.length;
      if (!text || len >= 6) return;
      this.password.push(text);
      this.ajaxData();
    },
    delHandle() {
      if (this.password.length <= 0) return false;
      this.password.shift();
    },
    ajaxData() {
      if (this.userstatus == 1) {
        MessageBox.confirm("您还没有认证身份，去认证？").then(action => {
          this.$router.push({ path: "/certification?status=1" });
        });
      } else if (this.userstatus == 3) {
        MessageBox.confirm("您的身份正在认证中，去查看？").then(action => {
          this.$router.push({ path: "/certification?status=3" });
        });
      } else if (this.status == 1) {
        this.password = [];
        MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
          action => {
            this.$router.push({ path: "/pay?phone=" + this.mobilephone });
          }
        );
      }
      if (this.status == 2 && this.userstatus == 2) {
        if (this.password.length >= 6) {
          this.getwithdraw(
            parseInt(this.password.join(" ").replace(/\s/g, ""))
          );
        }
      }
      return false;
    },
    selectMoney: function() {
      this.popupVisible = true;
      this.count = "";
    },
    postmoney(cod) {
      // if (this.userstatus == 1) {
      //   MessageBox.confirm("您还没有认证身份，去认证？").then(action => {
      //     this.$router.push({ path: "/certification?status=1" });
      //   });
      // } else if (this.userstatus == 3) {
      //   MessageBox.confirm("您的身份正在认证中，去查看？").then(action => {
      //     this.$router.push({ path: "/certification?status=3" });
      //   });
      // } else if (this.status == 1) {
      //   this.password = [];
      //   MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
      //     action => {
      //       this.$router.push({ path: "/pay/" + this.mobilephone });
      //     }
      //   );
      // }
      if (cod) {
        if (parseFloat(this.count) <= 0) {
          Toast({
            message: "提币额度必须大于0",
            position: "bottom",
            duration: 5000
          });
          return;
        }
        if(!this.address){
          Toast({
            message: "请先输入地址",
            position: "bottom",
            duration: 5000
          });
          return false;
        }
        if (parseFloat(this.count) <= parseFloat(this.money)) {
          this.flag1 = true;
          this.password = [];
          return;
        } else {
          this.count = "";
          this.flag1 = false;
          this.password = [];
          MessageBox.confirm("您的余额不足，先去充币？").then(action => {
            this.$router.push({ path: "/tment" });
          });
        }
      } else {
        Toast({
          message: "请先输入提币额度",
          position: "bottom",
          duration: 5000
        });
      }
    },
    allChange() {
      this.count = this.money;
    },
    getuser() {
      let para = {
        id: this.pageInfo.userinfo.id,
        coinType: this.$route.query.code
      };
      this.$ajaxGet("getPoundage", para).then(res => {
        if (res.code == 200) {
          // console.log(res);
          this.address = res.address ? res.address : "";
          this.sxmoney = this.rangeValue*res.poundage+res.poundage;
        }
      });
    },
    getwithdraw(h) {
      // console.log(this.flag);
      
      if (this.flag1) {
        let para = {
          id:this.pageInfo.userinfo.id,
          coinType: this.popup,
          quantity: this.count,
          payPwd: this.pwd.join(""),
          poundageValue:this.sxmoney
        };
        this.$ajaxPost("withdraw", para).then(res => {

          this.$refs.code.password = [];
          if (res.code == 200) {
            this.flag1 = false;
            this.$router.back();
            MessageBox({
              title: "提交成功！",
              message:
                "需大约10分钟完成转账，您可以去账单列表查看转账记录及状态"
            });
          } else {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 5000
            });
          }
        });
      } else {
        this.password = [];
        this.flag = false;
        MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
          action => {
            this.$router.push({ path: "/pay?phone=" + this.phone });
          }
        );
      }
    }
  },
  mounted() {
    this.getuser();
    this.title = "提取" + this.$route.query.code;
    this.popup = this.$route.query.code;
    this.money = this.$route.query.value;
    this.status=this.pageInfo.userinfo.statusPay;
    this.userstatus=this.pageInfo.userinfo.status;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/mention.css");
@import url("../../static/css/pay.css");
</style>
